<template>
    <div class="home">
        <div class="wrapper">
            <slide-bar icon-id="bi-rss" icon-color="text-warning" icon-size="30">welcome to here!</slide-bar>
            <div class="w-100">
                <content-head>
                    <template #title>{{title}}</template>
                    <template #des>{{des}}</template>
                    <template #calc>您已被赞{{praise}}次</template>
                </content-head>
                <transition enter-active-class="animate__animated animate__zoomIn">
                    <router-view></router-view>
                </transition>
            </div>
            <user-profile :src="imgPath" />
        </div>
    </div>
</template>
<script>
import { praise } from '../lib/praise-lib.js'
import {PathToSign} from '../lib/router-lib.js'
import userProfile from '@/components/user-profile/user-profile.vue'
import slideBar from '@/components/slide-bar/slide-bar.vue'
import contentHead from '@/components/content-head/content-head.vue'
const imgPath = require('../assets/img/wr_user.jpeg');
export default {
    name: 'Home',
    components: {
        userProfile,
        slideBar,
        contentHead
    },
    setup () {
        
        return {
             PathToSign,
            praise,
            imgPath
        }
    },
    /**
     * vue2
    */
    // watch: {
    //     $route(newVal) {
    //         console.log(newVal)
    //     }
    // }
}
</script>
<style scoped>
.home {
    height: 100vh;
    background: url('../assets/img/bg.jpeg') no-repeat center;
    background-size: cover;
}
.wrapper {
    width: 95vw;
    height: 90vh;
    background-color: rgb(44, 48, 80);
    position: absolute;
    left: calc(50% - 95vw / 2);
    top: calc(50% - 90vh / 2);
    display: flex;
    justify-content: space-between;
}
</style>